<template>
  <div class="system-health">
    <div class="page-title">系统状态</div>

    <el-row :gutter="20">
      <el-col :xs="24" :md="12">
        <div class="page-card">
          <h3>系统健康检查</h3>
          
          <el-descriptions :column="1" border style="margin-top: 20px">
            <el-descriptions-item label="系统状态">
              <el-tag :type="systemStore.health.status === 'ok' ? 'success' : 'danger'" size="large">
                {{ systemStore.health.status === 'ok' ? '正常运行' : '异常' }}
              </el-tag>
            </el-descriptions-item>
            
            <el-descriptions-item label="数据库连接">
              <el-tag :type="systemStore.health.database === 'connected' ? 'success' : 'danger'" size="large">
                {{ systemStore.health.database === 'connected' ? '已连接' : '未连接' }}
              </el-tag>
            </el-descriptions-item>
            
            <el-descriptions-item label="检查时间">
              {{ systemStore.health.timestamp ? dayjs(systemStore.health.timestamp).format('YYYY-MM-DD HH:mm:ss') : '-' }}
            </el-descriptions-item>
          </el-descriptions>

          <el-button
            type="primary"
            style="margin-top: 20px"
            @click="handleRefresh"
            :loading="refreshing"
            :icon="Refresh"
          >
            刷新状态
          </el-button>
        </div>
      </el-col>

      <el-col :xs="24" :md="12">
        <div class="page-card">
          <h3>数据统计</h3>
          
          <div class="stat-item">
            <div class="stat-label">总记录数</div>
            <div class="stat-value">{{ systemStore.stats.total }}</div>
          </div>

          <div class="stat-item">
            <div class="stat-label">待审核</div>
            <div class="stat-value warning">{{ systemStore.stats.pending_audit }}</div>
          </div>

          <div class="stat-item">
            <div class="stat-label">已通过</div>
            <div class="stat-value success">{{ systemStore.stats.approved }}</div>
          </div>

          <div class="stat-item">
            <div class="stat-label">已驳回</div>
            <div class="stat-value danger">{{ systemStore.stats.rejected }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="page-card">
      <h3>API 端点</h3>
      
      <el-table :data="apiEndpoints" style="margin-top: 20px">
        <el-table-column prop="method" label="方法" width="100">
          <template #default="{ row }">
            <el-tag :type="row.method === 'GET' ? 'info' : row.method === 'POST' ? 'success' : 'warning'">
              {{ row.method }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路径" show-overflow-tooltip />
        <el-table-column prop="description" label="说明" show-overflow-tooltip />
      </el-table>
    </div>

    <div class="page-card">
      <h3>环境信息</h3>
      
      <el-descriptions :column="2" border style="margin-top: 20px">
        <el-descriptions-item label="前端框架">Vue 3</el-descriptions-item>
        <el-descriptions-item label="UI 框架">Element Plus</el-descriptions-item>
        <el-descriptions-item label="状态管理">Pinia</el-descriptions-item>
        <el-descriptions-item label="路由">Vue Router</el-descriptions-item>
        <el-descriptions-item label="构建工具">Vite</el-descriptions-item>
        <el-descriptions-item label="HTTP 客户端">Axios</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useSystemStore } from '@/stores/system'
import { Refresh } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const systemStore = useSystemStore()
const refreshing = ref(false)

const apiEndpoints = [
  { method: 'GET', path: '/api/health', description: '健康检查' },
  { method: 'GET', path: '/api/audit/statistics', description: '获取审核统计' },
  { method: 'POST', path: '/api/import/excel', description: '上传 Excel' },
  { method: 'GET', path: '/api/import/template', description: '下载模板' },
  { method: 'POST', path: '/api/process/batch', description: '批量处理' },
  { method: 'POST', path: '/api/process/all', description: '处理所有' },
  { method: 'GET', path: '/api/process/pending', description: '待处理列表' },
  { method: 'GET', path: '/api/audit/pending', description: '待审核列表' },
  { method: 'POST', path: '/api/audit/submit', description: '提交审核' }
]

const handleRefresh = async () => {
  refreshing.value = true
  await Promise.all([
    systemStore.checkHealth(),
    systemStore.getStatistics()
  ])
  refreshing.value = false
}
</script>

<style lang="scss" scoped>
.system-health {
  h3 {
    color: #303133;
    margin-bottom: 12px;
  }

  .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .stat-label {
      color: #606266;
      font-size: 14px;
    }

    .stat-value {
      font-size: 24px;
      font-weight: bold;
      color: #303133;

      &.warning {
        color: #e6a23c;
      }

      &.success {
        color: #67c23a;
      }

      &.danger {
        color: #f56c6c;
      }
    }
  }
}
</style>


